<script setup lang="ts">
import defaultCover from '~/assets/imgs/news/default-article.png';

type TNewsDetail = NonNullable<Api.GetData<typeof apisBlog.apiNewsDetail>>;

defineProps<{
  detail: TNewsDetail;
}>();
</script>

<template>
  <RouterLink :to="{ name: RN.NEWS_DETAIL, query: { news_id: detail?.news_id } }">
    <div class="flex-between flex-col overflow-hidden rounded-lg">
      <div class="h-180px w-full flex-center items-start gap-1">
        <img class="w-full object-cover" :src="!!detail?.covers ? detail?.covers : defaultCover" alt="">
      </div>
      <div class="flex flex-1 flex-col items-start self-stretch gap-5 bg-sys-layer-a px-7.5 py-5 text-sys-text-body">
        <div class="flex-between self-stretch" :class="{ 'justify-end': !detail?.category?.[0]?.name }">
          <span v-if="detail?.category?.[0]?.name" class="block rounded-lg bg-sys-layer-d px-4 py-3">
            {{ detail?.category?.[0]?.name }}
          </span>
          <span class="order-end">
            {{ $d(detail?.create_time ?? 1725506751020) }}
          </span>
        </div>
        <p class="rows-ellipsis text-18px text-sys-text-head font-normal lt-tablet:text-4.5">
          {{ detail?.title }}
        </p>
        <p class="rows-ellipsis">
          {{ detail?.summary }}
        </p>
      </div>
    </div>
  </RouterLink>
</template>

<style scoped lang="scss">
.rows-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3em; /* 根据实际情况调整，确保足够显示两行内容 */
  line-height: 1.5em; /* 设置行高 */
}
</style>
